<template>
  <div class="banner">
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item,$index) in bannerArray" :key="$index">
        <a class="mt-swipe-item-a" href="javascript:;" @click="startGame(item.url)">
          <img width="100%" height="100%" :src="item.img">
        </a>
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script type="text/ecmascript-6">
  import {startGame} from '../../../assets/js/common'

  export default {
    data() {
      return {
        bannerArray: []
      }
    },
    created() {
      this.$http.get('/game/index.php?m=Home&c=Api&a=getBanners').then((response) => {
        if (response.data.code === this.ERROR_OK) {
          this.bannerArray = response.data.data
        }
      })
    },
    methods: {
      startGame
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .banner
    width 100%
    height 380px
    .mint-swipe-indicator
      background: #fff
      opacity .5
      &.is-active
        background: #2ecc40;
    .mt-swipe-item-a
      display block
      width 100%
      height 100%
      img
        border-radius 0px
</style>
